<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-20 column">
            <div class="page-header">
                <h1>
                    <small>上传文件区域</small>
                </h1>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-20 column">
            <form action="#" method="post" enctype="multipart/form-data" id="tf">
                <div class="form-group">
                    <label for="uploadfile">File input</label>
                    <input type="file" id="uploadfile" name="uploadfile" multiple="multiple">
                    <p class="help-block" id="help-block" style="color: red;"></p>
                </div>
                <button type="button" class="btn btn-default" onclick="upload()">提交</button>
            </form>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-20 column">
            <div class="page-header">
                <h1>
                    <small>服务器文件信息</small>
                </h1>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-20 column">
            <table class="table table-hover table-striped" id="file_table" style="table-layout: fixed; word-break:break-all;">
                <thead>
                <tr>
                    <th width="180px">UUID</th>
                    <th width="150px">原始文件名</th>
                    <th width="150px">文件类型</th>
                    <th width="100px">文件大小</th>
                    <th width="150px">创建时间</th>
                    <th width="200px">文件保存目录</th>
                    <th width="100px">文件元信息</th>
                    <th width="50px">下载</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">

    //   初始加载页面进行文件数据查询,使用ajax
    $(function (){
        $.ajax({
            url:"${APP_PATH}/queryAllFiles",
            type:"POST",
            success:function(result){
                //1、解析并显示文件信息
                build_file_table(result);
            }
        });
    });

    //查询到的数据封装到,table具体位置.
    function build_file_table(result){
        //清空table表格
        $("#file_table tbody").empty();
        var files = result;
        //循环遍历多条数据,添加到table的tboby中.
        $.each(files,function (index,item){
            var fileUUID = $("<td></td>").append(item.uuid);
            var fileoriginalname = $("<td></td>").append(item.originalName);
            var filetype = $("<td></td>").append(item.type);
            var filesize = $("<td></td>").append(item.size).append("B");
            var filetime = $("<td></td>").append(item.time);
            var filecataLog = $("<td></td>").append(item.cataLog);
            var json = $("<td></td>").append($("<button></button>").attr("uuid",item.uuid).addClass("file_json_btn").append("查看文件元信息"));
            var a = $("<td></td>").append($("<a></a>").attr("href","${pageContext.request.contextPath}/fileDownload?fileUUID="+item.uuid).append("下载"));
            $("<tr></tr>").append(fileUUID).append(fileoriginalname).append(filetype)
                .append(filesize).append(filetime).append(filecataLog).append(json).append(a).appendTo("#file_table tbody");
        });
    }

    //为查看元信息按钮提供点击事件.发送ajax请求,从数据库获取文件信息.
    $(document).on("click",".file_json_btn",function(){
        var fileUUID = $(this).parents("tr").find("td:eq(0)").text();
        $.ajax({
            url:"${APP_PATH}/queryFileJSON?fileUUID="+fileUUID,
            type:"GET",
            success:function (result){
                alert("文件名："+result.originalName+"\n文件大小："+result.size+" B"+"\n文件上传时间："+result.time+"\n文件保存目录："+result.cataLog+"\n文件类型："+result.type);
            }
        });
    });

    //检查是否选择文件
    function check(){
        var file = document.getElementById("uploadfile").value;
        if(file.length==0||file==""){
            document.getElementById("help-block").innerHTML="还未选择文件，请添加文件";
            return false;
        }
        return true;
    }
    //使用ajax进行文件上传
    function upload(){
        if(check()){
            var form = new FormData(document.getElementById("tf"));
            $.ajax({
                url:"${APP_PATH}/fileUpload",
                type:"POST",
                data:form,
                processData:false,
                contentType:false,
                success:function (result){
                    alert(result);
                    location.reload();
                }
            });
        }else{
            return false;
        }
    }
</script>
</body>
</html>